import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {ColorStr, MainAttr} from "../../../script/type/Type";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {View} from "../../../script/frame/apiModel/gui/React";

interface IProp {
    x: number,
    y: number,
    handBookId: string,
    lv: number,
    hidden: boolean,
}
interface IState {
}

export default class HandBookInfoPage extends React.Element<IProp, IState> {

    render = () => {
        const backSize = { h: 0.44820, w: 0.25000 }
        const backPos = { x: this.props.x, y: this.props.y }
        // const backPos = { x: 0.7, y: 0.45 }
        const xPadding = 0.00500;
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);


        const handBookData = DataRouter.getHandBookDataByHandBookId(this.props.handBookId);
        const unitStr = handBookData?.family_tpye;
        const unitData = DataRouterUtil.getUnitDataByUnitStr(unitStr);
        if (unitData) {
        } else {
            // SysToastUtil.toastError(`图鉴${this.props.handBookId}中未填写单位ID, 或单位ID不正确`);
            return;
        }

        const name = unitData.Name;
        const nameSize = { w: backSize.w, h: 0.02490 };

        const mainAttr = unitData.Primary;
        // let mainStr = `Lv:${this.props.lv}\n主属性:`;
        let mainStr = `主属性:`;
        if (mainAttr === MainAttr.STR) {
            mainStr = mainStr + '力量'
        } else if (mainAttr === MainAttr.AGI) {
            mainStr = mainStr + '敏捷'
        } else if (mainAttr === MainAttr.INT) {
            mainStr = mainStr + '智力'
        }
        const mainAttrSize = { w: backSize.w, h: 0.04980 };

        const describ = CodeUtil.getColorStr(ColorStr.gray, unitData.Ubertip);
        const describSize = { w: backSize.w, h: 0.01660 };

        const talent = handBookData?.skill;
        const abilityData = DataRouter.getAbilityDataById(talent);

        const talentIcon = DataRouterUtil.getIconUrlByIconData(abilityData);
        const talentIconSize = { w: 0.03750, h: 0.04980 };
        const talentDes = abilityData?.Ubertip;
        const talentDesSize = { w: 0.17500, h: 0.04980 };

        let retStr = '图鉴效果:\n';
        if (handBookData?.desc) {
            const descArr = CodeUtil.getArrBySplit(handBookData?.desc);
            for (let i = 0; i < descArr.length; i++) {
                let descStr = descArr[i];
                const index = i + 1;
                descStr = `Lv${index}: ${descStr}`
                if (this.props.lv > i) {
                } else {
                    descStr = CodeUtil.getColorStr(ColorStr.gray, descStr);
                }
                retStr = retStr + `${descStr}\n`;
            }
            // for (let i = 0; i < 9; i++) {
            //     // let descStr = descArr[i];
            //     // if (this.props.lv > i) {
            //     // } else {
            //     //     descStr = CodeUtil.getColorStr(ColorStr.gray, descStr);
            //     // }
            //     retStr = retStr + `${1111}\n`;
            // }
        } else {
            const descriptLineStr = '图鉴无效果';
            retStr = retStr + `${descriptLineStr}\n`;
        }

        const retLineArr = retStr.split('\n');
        const retLineNum = retLineArr.length - 1;
        const retSize = { h: retLineNum * fontSize, w: backSize.w - xPadding * 2 }

        const goodInfoPagePath = Configer.getResource(ResourceKey.infoPagePath);


        return <View   key={GuiKeys.handBookBarInfo} style={{ hidden: this.props.hidden, backgroundImage: goodInfoPagePath, left: backPos.x, top: backPos.y, width: backSize.w, height: backSize.h, paddingL: xPadding, paddingT: 0.01660 }}>
            <View   key={GuiKeys.handBookBarInfoNameAttr} style={{ width: backSize.w, height: 0.05810 }}>
                <View   key={GuiKeys.handBookBarInfoName} style={{ width: nameSize.w, height: nameSize.h }}>{name}</View>
                <View   key={GuiKeys.handBookBarInfoAttr} style={{ fontSize: 0.01494, width: mainAttrSize.w, height: mainAttrSize.h }}>{mainStr}</View>
            </View>
            <View   key={GuiKeys.handBookBarInfoDes} style={{ fontSize: 0.01494, width: describSize.w, height: describSize.h }}>{describ}</View>
            <View   key={GuiKeys.handBookBarInfoHandBookFun} style={{ marginT: 0.01660, width: retSize.w, height: retSize.h, marginB: 0.01660 }}>{retStr}</View>
            <View   key={GuiKeys.handBookBarInfoTalentIcon} style={{ backgroundImage: talentIcon, width: talentIconSize.w, height: talentIconSize.h, marginT: 0.01660 }}></View>
            <View   key={GuiKeys.handBookBarInfoTalentDes} style={{ fontSize: 0.01494, width: talentDesSize.w, height: talentDesSize.h, marginT: 0.01660, marginL: 0.00125 }}>{talentDes}</View>
        </View>
    }
}